<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文章榜</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="article-list">
      <header class="article-list__header">
        <h1 class="article-list__title">文章榜</h1>
        <button class="article-list__refresh-button">换一换</button>
      </header>
      <ol class="article-list__items">
        <li class="article-list__item article-list__item--1">
          <span class="article-list__rank">1</span>
          <span class="article-list__title"
            >我开源了一个支持自动生成 co...</span
          >
        </li>
        <li class="article-list__item article-list__item--2">
          <span class="article-list__rank">2</span>
          <span class="article-list__title">老板：给你20天，写一个可拖...</span>
        </li>
        <li class="article-list__item article-list__item--3">
          <span class="article-list__rank">3</span>
          <span class="article-list__title">只会Vue的我，一入职就让用R...</span>
        </li>
        <li class="article-list__item article-list__item--4">
          <span class="article-list__rank">4</span>
          <span class="article-list__title">改进菜单栏动态展示样式，我...</span>
        </li>
        <li class="article-list__item article-list__item--5">
          <span class="article-list__rank">5</span>
          <span class="article-list__title">最后一次，彻底搞懂kotlin...</span>
        </li>
      </ol>
      <footer class="article-list__footer">
        <a href="#" class="article-list__more-link">查看更多</a>
      </footer>
    </section>
  </body>
</html>
